<template>
  <div>
    <vue-html5-editor :content="content" @change="setContent" class="editor"></vue-html5-editor>
  </div>
</template>

<script>
export default {
  props: ['html'],
  mounted() {
    this.setContent(this.html)
  },
  watch: {
    html(val) {
      this.setContent(val)
    },
    content(val) {
      // console.log(val)
      this.$emit('update:html', this.content)
    }
  },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    setContent(content) {
      if (this.content === content) return
      this.content = content
    }
  }
}
</script>

<style>
.simple-editor.quill-editor .ql-container {
  height: 120px;
  padding-bottom: 1rem;
  background: white;
}
</style>
